<template>
  <!--  jiera-->
  <div class="personal_homepage_container p-5">
    <div class="top">
      <div class="bg-white person_info">
        <PeopleInfo :data="userInfo">
          <template #default>
            <div class="info-row">
            <div class="des">{{ userInfo.introduction || '暂无个人简介' }}</div>
            <div class="other_person_info">
              <div>
                <ElIcon color="#409Eff"
                  ><component :is="userInfo.sex == 0 ? Male : Female"></component
                ></ElIcon>
                {{ userInfo.sex === 0 ? '男' : '女' }}
              </div>
              <div>
                <ElIcon><Location></Location></ElIcon>
                {{ userInfo.address || '未知地区' }}
              </div>
            </div>
            </div>
          </template>
          <template #action>
            <ElIcon size="20" color="#409Eff" class="cursor-pointer">
              <Share />
            </ElIcon>
          </template>
        </PeopleInfo>
        <div class="related_data">
          <div class="flex gap-5 align-center">
            <div class="item" v-for="item in userInfo.list" :key="item.label">
              <span class="mr-2">{{ item.label }}</span
              ><span>{{ item.num }}</span>
            </div>
          </div>

          <div class="action" v-if="currentUserId==currentLoginUserId">
            <ElButton type="primary" @click="handleGoUpdate">修改资料</ElButton>
          </div>
        </div>
      </div>
      <div class="bg-white other_info"></div>
    </div>
    <div class="bottom">
      <div class="bg-white left">
        <el-tabs v-model="activeTab">
          <el-tab-pane
            v-for="item in tabList"
            :label="item.label"
            :key="item.label"
            :name="item.value"
          >
          <template v-if="activeTab.includes('task')">
              <ArticleList :list="myTaskList" :pagination="pagination" @refresh="handleRefresh" >
                <template #default="{ id }">
                  <el-dialog
                    v-model="isDeleteDialogShow"
                    title="提示"
                    width="500"
                    append-to-body
                    :modal="false"
                  >
                    <span>是否确认删除该帖子？</span>
                    <template #footer>
                      <div class="dialog-footer">
                        <el-button @click.stop="isDeleteDialogShow = false">取消</el-button>
                        <el-button type="primary" @click.stop="handleTaskDelete(String(id))">
                          确认
                        </el-button>
                      </div>
                    </template>
                  </el-dialog>
                </template>
              </ArticleList>
          </template>
          <template v-else>
            <UserList :data="followOrFansList" :pagination="pagination" @refresh="handleUserListRefresh"></UserList>
          </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right">
        <div class="card bg-white"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import PeopleInfo from '@/components/PeopleInfo.vue'
import { ElIcon } from 'element-plus'
import { Share, Male, Female, Location } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router'
import ArticleList from '@/components/ArticleList.vue'
import UserList from '@/components/UserList.vue'
import { useUserStore } from '@/stores/user'
import { Pagination, TaskEntity } from '@/composables/api/task'

const router = useRouter()
const route = useRoute()
const userStore =useUserStore()


const currentUserId = computed(() => {
  return route.query?.id  || '1000000'
})

const currentLoginUserId = computed(()=>userStore.userInfo.uid||'1000000')
const userInfo = ref({
  id:currentUserId.value,
  name: '',
  description: '',
  sex: 0,
  location: '',
})

const getCurrentUserInfo =()=>{
  service.user.getUserInfo(currentUserId.value).then((res)=>{
    userInfo.value =res.data
  })
}

const relatedData = ref([
  {
    label: '获赞',
    num: 1,
  },
  {
    label: '浏览',
    num: 1,
  },
  {
    label: '关注',
    num: 1,
  },
  {
    label: '粉丝',
    num: 1,
  },
])

const handleGoUpdate = () => {
  router.push('/main/personalInfoUpdate/')
}

const tabList = [
  {
    label: '帖子',
    value: 'task-3',
  },
  // todo
  // {
  //   label: '评论',
  //   value: 'task-4',
  // },
  {
    label: '任务',
    value: 'task-1',
  },
  {
    label: '收藏',
    value: 'task-6',
  },
  {
    label: '关注',
    value: 'follow-0',
  },
  {
    label: '粉丝',
    value: 'follow-1',
  },
]
const activeTab = ref(tabList[0].value)


watch(activeTab,(newVal)=>{
  pagination.value.pageNum=1
  if(newVal.includes('task')){
    let type:string|undefined=newVal.split('-')[1]
    type=type!='0'?type:undefined
    getMyTasks(type)
  }else{
    getFollowOrFansList()
  }
})

const myTaskList = ref([])
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})
const getMyTasks = async (type?) => {
  const queryData = {
    userId: currentUserId.value,
    type,
    pageSize: pagination.value.pageSize,
    pageNum: pagination.value.pageNum,
  }
  const result = await service.task.list(queryData)
  myTaskList.value = result.list
  pagination.value.total = result.total
}


onMounted(() => {
  getCurrentUserInfo()
  getMyTasks(3)
})

const handleTaskUpdate = (id: string) => {
  router.push(`/main/task/handle?id=${id}`)
}

const isDeleteDialogShow = ref(false)
const handleTaskDelete = async (id: string) => {
  await service.task.delete({ ids: id })
  isDeleteDialogShow.value = false
  getMyTasks()
}

const handleRefresh = (paginationInfo?: any) => {
  if (paginationInfo) {
    pagination.value.pageSize = paginationInfo.pageSize
    pagination.value.pageNum = paginationInfo.pageNum
  }
  // 点击页码的时候传当前type
  const type = activeTab.value.split('-')[1];
  getMyTasks(type)
}


const followOrFansList = ref([])
const getFollowOrFansList=async ()=>{
  const queryData = {
    type:activeTab.value.split('-')[1],
    userId:currentUserId.value,
    pageSize:pagination.value.pageSize,
    pageNum:pagination.value.pageNum
  }
  const result  = await service.user.getFollows(queryData)
  followOrFansList.value = result.list
  pagination.value.total=result.total
}

const handleUserListRefresh=(pagination?: any)=>{
  if (pagination) {
    pagination.value.pageSize = pagination.pageSize
    pagination.value.pageNum = pagination.pageNum
  }
  getFollowOrFansList()
}
</script>

<style lang="scss" scoped>
.personal_homepage_container {
  .top {
    .person_info {
      padding: 20px;
      border-radius: 10px;

      .des,
      .other_person_info {
        color: #666;
      }

      .other_person_info {
        display: flex;
        gap: 10px;
      }

      .related_data {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 14px;

        .item {
          padding: 0 10px;
          border-right: 1px solid rgba(0, 0, 0, 20%);
        }
      }
    }
  }

  .bottom {
    display: flex;
    gap: 20px;
    margin-top: 20px;

    .left {
      width: 70%;
      padding: 10px;
      border-radius: 10px;
    }

    .right {
      flex: 1;
      border-radius: 5px;
    }
  }
}

.info-row {
  display: flex;
  align-items: center;
}
</style>
